<template>
  <div class="gold-shop-wrap">
    <van-nav-bar title="安全检测" left-arrow fixed @click-left="onClickLeft" />
    <div>
      <van-field label="手机号：" :value="account.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')" readonly />
      <van-field v-model="sms" center clearable label="验证码：" placeholder="请输入验证码">
        <template #button>
          <van-button class="custom-button" size="small" type="primary" :disabled="isCountingDown"
            @click="sendVerificationCode">
            {{ buttonText }}
          </van-button>
        </template>
      </van-field>
    </div>
    <div class="setup_btn">
      <!-- <van-button type="info" size="large">下一步</van-button> -->
      <van-button color="linear-gradient( 90deg, #4A89EC 0%, #1261E2 100%)" size="large" round
        @click="submit">下一步</van-button>
    </div>
  </div>
</template>
<script>
    // import {  NoNull } from '@/tool/validate';
    import { SEND_CODE} from '@/api/cms';
    import { Dialog } from 'vant';
    export default{
        data () {
            return {
                sms: '',
      countdown: 60,
      isCountingDown: false,
      buttonText: '点击获取',
      account:""
            }
        },
        mounted() {
        window.scrollTo(0, 0)
    this.account=this.$route.query.account;
  },
        methods: {
          onClickLeft() {
            this.$router.back()
        },
        sendVerificationCode() {
  // 检查是否正在倒计时
  if (this.isCountingDown) {
    return;
  }

  // 发送验证码请求
  let params={
    account:this.account,
    scene:this.$route.query.filg==1?3:4
  }
  this.$http.post(SEND_CODE,params)
    .then(() => {
      // 请求成功后开始倒计时
      this.startCountdown();
    })
    .catch((error) => {
      // 处理错误
      console.error('发送验证码失败:', error);
      // 可以在这里添加错误提示
    });
},
startCountdown() {
  this.isCountingDown = true;
  this.countdown = 60;
  this.buttonText = `${this.countdown}s后重新发送`;

  const timer = setInterval(() => {
    this.countdown--;
    this.buttonText = `${this.countdown}s后重新发送`;

    if (this.countdown <= 0) {
      clearInterval(timer);
      this.isCountingDown = false;
      this.buttonText = '点击获取';
    }
  }, 1000);
},
        //下一步
        submit(){
            if(this.sms=='') {
                  this.$toast('请输入验证码')
                  return
            }
            // Dialog.alert({
            //      message: '弹窗内容',
            //     }).then(() => {

            //     });
            // 成功跳转下一步
            // console.log(this.$route.query.filg);
            this.$router.push({
                path:this.$route.query.filg==1?'/loginPassword':'/payPassword',
                query:{
                  sms:this.sms,
                  account:this.account
                }
            })
            return
            let params = {};
                params['password'] = this.passWordCode;
                params['sms_code']=this.smsCode;
            // this.$http.post(SEND_CODE + '?' + qs.stringify(params))
            this.$http.post(PASSWORD, params)
              .then(() => {
                this.$toast.success('修改成功')
                setTimeout(()=> {
                   this.$router.push({
                     name: 'home'
                   })
                 }, 1000)
              })
              .finally(() => {
                this.loadBtn = false
              })
        }
    },

    }
</script>
<style less="scss" scoped>
.gold-shop-wrap {
  min-height: calc(100vh - 46px);
  padding-top: 46px;
  background: #F2F4F5;
}
::v-deep .van-nav-bar .van-icon {
    color: #333333;
  }

  ::v-deep .van-nav-bar__arrow {
    font-size: 20px;
  }
.setup_btn {
  width: 80%;
  margin: 0 auto;
  margin-top: 2rem;
}

.custom-button {
  color: #1D69E4 !important;
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  font-size: .28rem !important;
}

.custom-button::before {
  display: none !important;
}

/* 禁用状态的样式 */
.custom-button:disabled {
  color: #999 !important;
  opacity: 0.5;
}
</style>
